<template>
  <div class="App">
    <h1 class="content">我是APP11</h1>
    <div>
      <p v-red>自定义指令test1</p>
      <p v-red>自定义指令test2</p>
      <p v-bgColor="'green'">自定义指令test3</p>
      <p v-bgColor="'blue'">自定义指令test4</p>
    </div>
    <Count />
  </div>
</template>

<script>
import Count from "@/components/Count";
export default {
  name: "App",
  components: {
    Count,
  },
  directives: {
    //简写的自定义指令(定义的时候不需要添加v-,使用的时候需要添加v-)
    red(el) {
      //el：指令所绑定的元素，可以用来直接操作 DOM。
      console.log("el.parentNode", el.parentNode);
      el.style.background = "red";
    },

    //简写的接收值的自定义指令
    bgColor(el, binding) {
      // console.log("el,binding", el, binding);
      el.style.background = binding.value;
    },
  },
};
</script>
